<div class="date">
  <div class="date-picker">
    <ng2-datepicker [options]="options" [(ngModel)]="date" (outputEvents)="onDateChange($event)"></ng2-datepicker>
  </div>
  <div class="date-group">
    <ul class="week-list list-unstyled">
      <li class="week-item" (click)="preWeek()">
        < 上一周
      </li>
      <li class="week-item" (click)="changeDate(weekList[i])" *ngFor="let week of weekdays; let i = index" [ngClass]="{'active': caculate(weekList[i])===caculate(date?.momentObj), 'disabled': caculate(weekList[i]) > caculate()}">
        <div class="week-num">{{week}}</div>
        <div class="week-day">{{caculate(weekList[i])}}</div>
      </li>
      <li class="week-item" [ngClass]="{'disabled': caculate(weekList[6]) > caculate()}" (click)="nextWeek()">
        下一周 >
      </li>
    </ul>
  </div>
</div>

<div class="tree">
  <ul class="tree-list">
    <li class="tree-item">
      <div class="tree-block">
        <div class="country-block">国家/地区</div>
        <div class="event-block">事件</div>
        <div class="start-block">重要性</div>
      </div>
    </li>
    <li *ngFor="let item of eventList" class="tree-item"  [datetime]="item.Time">
      <div class="tree-block">
        <div class="country-block"><img class="country-img" [src]="'assets/image/'+countryList['cd_'+item?.CountryId]?.IconUrl"/>{{countryList['cd_'+item?.CountryId]?.Name}}</div>
        <div class="event-block">{{item.Description}}</div>
        <div class="start-block start-block-c">
          <li class="glyphicon glyphicon-star" [ngClass]="{'glyphicon-star': item.Impact > 0, 'glyphicon-star-empty': item.Impact == 0}"></li>
          <li class="glyphicon glyphicon-star" [ngClass]="{'glyphicon-star': item.Impact > 1, 'glyphicon-star-empty': item.Impact < 2}"></li>
          <li class="glyphicon glyphicon-star-empty" [ngClass]="{'glyphicon-star': item.Impact > 2, 'glyphicon-star-empty': item.Impact < 3}"></li>
        </div>
      </div>
    </li>
  </ul>
</div>